<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div>页面载入时候：</div>
    <div><code>pageVisibility.hidden: </code><span id="hidden"></span></div>
    <div><code>pageVisibility.visibilityState: </code><span id="visibilityState"></span></div>
    <p>记录页面状态的改变以及时间：</p>
    <ul id="visibilitychange"></ul>

    <script>
        /*!
 * pageVisibility.js by zhangxinxu 2012-11-29
**/

        var pageVisibility = (function () {
            var prefixSupport;
            var keyWithPrefix = function (prefix, key) {
                if (prefix !== "") {
                    // 首字母大写
                    return prefix + key.slice(0, 1).toUpperCase() + key.slice(1);
                }
                return key;
            };
            var isPageVisibilitySupport = (function () {
                var support = false;
                if (typeof window.screenX === "number") {
                    ["webkit", "moz", "ms", "o", ""].forEach(function (prefix) {
                        if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) {
                            prefixSupport = prefix;
                            support = true;
                        }
                    });
                }
                return support;
            })();

            var isHidden = function () {
                if (isPageVisibilitySupport) {
                    return document[keyWithPrefix(prefixSupport, "hidden")];
                }
                return undefined;
            };

            var visibilityState = function () {
                if (isPageVisibilitySupport) {
                    return document[keyWithPrefix(prefixSupport, "visibilityState")];
                }
                return undefined;
            };

            return {
                hidden: isHidden(),
                visibilityState: visibilityState(),
                visibilitychange: function (fn, usecapture) {
                    usecapture = undefined || false;
                    if (isPageVisibilitySupport && typeof fn === "function") {
                        return document.addEventListener(prefixSupport + "visibilitychange", function (evt) {
                            this.hidden = isHidden();
                            this.visibilityState = visibilityState();
                            fn.call(this, evt);
                        }.bind(this), usecapture);
                    }
                    return undefined;
                }
            };
        })(undefined);
    </script>
    <script>
        // 以上为方法，以下为测试执行脚本
        (function () {
            var $ = function (selector) {
                if (document.querySelector) {
                    return document.querySelector(selector);
                } else {
                    return document.getElementById(selector.replace(/^#/, ""));
                }
            }

            $("#hidden").innerHTML = pageVisibility.hidden;
            $("#visibilityState").innerHTML = pageVisibility.visibilityState;
            var eleVisibilityChange = $("#visibilitychange");
            pageVisibility.visibilitychange(function () {
                eleVisibilityChange.innerHTML =
                    eleVisibilityChange.innerHTML + '<li>' + this.visibilityState + ": " + new Date().toLocaleString() + '</li>';
            });
        })();
    </script>
</body>

</html>